<template>
  <div class="city">
    <!-- 头部导航栏 -->
    <van-nav-bar
      class="bg"
      :title="selectCity.name"
      right-text="切换城市"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 搜索栏 -->
    <div class="city_form">
      <div class="form_serach">
        <input v-model="searchData" placeholder="输入学校、商务楼、地址" required />
      </div>
      <div>
        <van-button size="small" width="100%" class="form_btn" type="info" @click="serachCity">提交</van-button>
      </div>
    </div>
    <ul class="getpois_ul">
      <li v-for="(item,i) of cityList" :key="i" @click="toMsite(item)">
        <h4 class="ellipsis">{{item.name}}</h4>
        <p class="ellipsis">{{item.address}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "city",
  data() {
    return {
      searchData: "",
      cityList: [], //搜索结果
      geohash: "", //经纬度
      selectCity: {} //所选城市信息
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      this.$router.push("/home");
    },
    async serachCity() {
      //根据关键字搜索地址
      const id = this.$route.params.cityid;
      if (this.searchData) {
        const { data: res } = await this.$axios.get("v1/pois", {
          params: { city_id: id, keyword: this.searchData }
        });
        this.cityList = res;
      }
    },
    toMsite(item) {
      //跳转页面保存信息
      window.localStorage.setItem("placeHistory", JSON.stringify(item));
      const res = JSON.parse(window.localStorage.getItem("placeHistory"));
      this.$store.commit("setGeohash", res.geohash);
      this.$store.commit("setLatitude", res.latitude);
      this.$store.commit("setLongitude", res.longitude);
      this.$router.push({ path: "/msite", query: { geohash: res.geohash } });
    },
    async getSelectCity() {
      //所选城市信息
      const { data: res } = await this.$axios(
        `v1/cities/${this.$route.params.cityid}`
      );
      this.selectCity = res;
      this.$store.commit("setCity", res.name);
      this.$store.commit("setCityID", res.id);
    }
  },
  created() {
    this.getSelectCity();
  }
};
</script>

<style lang="stylus" scoped>
@import '../../assets/css/common.styl';

.bg {
  background-color: $bg-color;
}

.van-nav-bar__title {
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
}

.van-nav-bar .van-icon {
  color: #fff;
  font-size: 0.8rem;
}

.van-nav-bar__left {
  left: 0;
}

.van-nav-bar__text {
  color: #fff;
  padding: 0 10px;
}

.city_form {
  padding: 0.2rem 0.5rem;
  background-color: #fff;
  margin-top: 0.2rem;

  .form_serach {
    font-size: 14px;

    input {
      width: 100%;
      padding: 0.2rem 0.1rem;
      border-radius: 3px;
      border: 1px solid #e4e4e4;
      margin-bottom: 0.3rem;
    }
  }

  .form_btn {
    min-width: 100%;
  }
}

.getpois_ul {
  background-color: #fff;

  li {
    padding: 0 0.5rem;

    h4 {
      font-size: 14px;
    }

    p {
      font-size: 14px;
      color: #999;
      padding-bottom: 0.5rem;
    }
  }
}
</style>